<script setup>
  import {
    getIp,
    forecastNow,
    forecast
  } from './api.js'
  import {
    ref,
    getCurrentInstance
  } from 'vue'
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app'
  const {
    proxy
  } = getCurrentInstance()
  const userIp = ref('')
  const city = ref('')
  const cityDate = ref({})
  const isRepositioning = ref(false)
  onLoad(() => {
    if (uni.getStorageSync('currentLocation')) {
      cityDate.value = JSON.parse(uni.getStorageSync('currentLocation'))
      realTime.value = JSON.parse(uni.getStorageSync('bannarRealTime'))
      today.value = JSON.parse(uni.getStorageSync('bannarToday'))
    } else {
      isRepositioning.value = true
    }
    getIpApi()
  })

  onShow(() => {
    if (cityDate.value.adcode) {
      forecastNowApi(cityDate.value.adcode)
    }
  })
  const getIpApi = (async () => {
    const res = await getIp()
    if (res && res.code == 1) {
      userIp.value = res.data.ip
      cityDate.value = res.data
      city.value = res.city
      uni.setStorageSync("cityRegeo", res.data)
      uni.setStorageSync("currentLocation", JSON.stringify(cityDate.value))
      proxy.$getLocation(cityDate.value)
      forecastNowApi(res.data.adcode)
      forecastApi(res.data.adcode)

    } else {
      userIp.value = res.data.ip
      proxy.$geocodeIpRegeo(res.data.ip).then(async (ele) => {
        cityDate.value = ele
        uni.setStorageSync("currentLocation", JSON.stringify(ele))
        city.value = ele.city
        await forecastNowApi(ele.adcode)
        await forecastApi(ele.adcode)
      })
    }
  })

  function onHome() {
    const url = `https://weather.geiqiutiyu.com/#/pages/index/index?cityList=${JSON.stringify(cityDate.value)}`
    window.open(url, '_blank');
    // uni.navigateTo({
    //   url: `/pages/index/index?cityList=${JSON.stringify(cityDate.value)}`
    // })
  }

  //实时天气
  const realTime = ref({})
  const forecastNowApi = (async (adcode) => {
    const res = await forecastNow({
      adcode: adcode,
    })
    if (res && res.code == 1) {
      realTime.value = res.data
      uni.setStorageSync("bannarRealTime", JSON.stringify(realTime.value))
    }
  })
  //15天天气
  const today = ref({})
  const forecastApi = (async (adcode) => {
    const res = await forecast({
      adcode: adcode,
    })
    if (res && res.code == 1) {
      isRepositioning.value = false
      today.value = res.data[0]
      uni.setStorageSync("bannarToday", JSON.stringify(today.value))
    }
  })
</script>

<template>
  <view class="banner-page" @click="onHome">
    <view class="banner-bg"
      :style="'background:url('+$getWeatherHomeImage(realTime.icon) +') no-repeat;background-size: contain;'"></view>
    <view class="banner-content" v-if="!isRepositioning">
      <view class="banner-header">
        <view class="header-city">
          <image src="@/static/icon/positioning.png" mode=""></image>
          <view class="city-name">{{cityDate.district}} {{cityDate.city}}</view>
        </view>
        <view class="banner-footer">
          <view class="footer-weater">
            <view class="">{{realTime.text}}</view>
            <image :src="$getWeatherImage(realTime.icon)" mode=""></image>
          </view>
          <view class="footer-temperature">{{today.tempMax}}°/{{today.tempMin}}°</view>
        </view>
      </view>
      <view class="header-num">{{realTime.temp}}°</view>
    </view>
    <up-loading-icon loading-mode="semicircle" loadingText="加载中..." v-else></up-loading-icon>
  </view>
</template>


<style lang="scss" scoped>
  .banner-page {
    width: 100%;
    height: 100%;
    background: linear-gradient(225deg, rgba(48, 94, 209, 1) 0%, rgba(141, 173, 252, 1) 100%);
    position: relative;
    box-sizing: border-box;
    padding: 20rpx 32rpx 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .banner-bg {
      width: 388rpx;
      height: 314rpx;
      opacity: 0.8;
      transform: rotate(90deg);
      background: url('') no-repeat;
      position: absolute;
      mix-blend-mode: screen;
      background-size: contain;
      right: -40rpx;
      top: 0;
    }

    .banner-content {
      display: flex;
      height: 100%;
      width: 100%;
      justify-content: space-between;

      .banner-header {
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .header-city {
          display: flex;
          align-items: center;
          font-size: 48rpx;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          margin-top: 28rpx;

          image {
            width: 28rpx;
            height: 36rpx;

          }

          .city-name {
            margin-left: 8rpx;
            font-size: 48rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 56rpx;
          }
        }

        .banner-footer {
          display: flex;
          flex-direction: column;

          .footer-weater {
            display: flex;
            align-items: center;
            font-size: 40rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 52rpx;

            image {
              width: 40rpx;
              height: 40rpx;
              margin-left: 8rpx;
            }
          }

          .footer-temperature {
            margin-top: 12rpx;
            font-size: 40rpx;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 52rpx;

          }
        }

      }

      .header-num {
        font-size: 128rpx;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 120rpx;
      }


    }
  }
</style>